<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 引入公用部分 -->
    <!--<script th:replace="head::static"></script>-->
    <script src="/jquery/jquery.js"></script>
    <link href="/layui/css/layui.css" rel="stylesheet" type="text/css">
    <script src="/layui/layui.js"></script>
    <style>
        .layui-table-body, .layui-table-box, .layui-table-cell{
            overflow: visible;
        }
        /* 设置下拉框的高度与表格单元相同 */
        td .layui-table-cell .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }

    </style>
</head>
<body>

<br/><br/>
    <div class="layui-btn-container money">
    &nbsp;&nbsp;&nbsp;
        <button type="button" id="sum_money1" class="layui-btn layui-btn-primary">发放金额：0.00</button>
        <button type="button" id="sum_money2" class="layui-btn layui-btn-primary">服务费金额：0.00</button>
        <button type="button" id="sum_money3" class="layui-btn layui-btn-primary">项目名称：0.00</button>
        <button type="button" id="sum_money4" class="layui-btn layui-btn-primary">联系人：无</button>
    	<button type="button" id="sum_money5" class="layui-btn layui-btn-primary">联系人电话：00000000000</button>
    </div>

<table class="layui-hide" id="templateTable" lay-filter="display"></table>


<script type="text/html" id="toolsBar">
    {{#  if(d.paymentStatus == 'P'){ }}

    {{#  } }}

</script>

</body>
<!-- js -->
<script>

    layui.use(['element', 'form', 'table', 'layer', 'laydate', 'tree', 'util'], function () {
        let table = layui.table , form = layui.form;
        var orderId = location.href.split('?')[1];
        
        $.post('/platform/grant/findByProjectInfo?orderId='+orderId, {}, function (data) {
        			console.log(data);
                    $("#sum_money1").html("发放金额："+formatMoney(data.data[0].realAmount));
                    $("#sum_money2").html("服务费金额："+formatMoney(data.data[0].serviceAmount));
                    $("#sum_money3").html("项目名称："+data.data[0].projectName);
                    $("#sum_money4").html("联系人："+data.data[0].chargeName);
                    $("#sum_money5").html("联系电话："+data.data[0].telephone);
        })
        
        table.render({
            elem: '#templateTable',
            url: '/platform/grant/list/detail?platformGrantId='+orderId,
            method: "get"
            , cols: [
                [
                    {field: 'id',title: '明细单号',width:230},
                    {field: 'cardCode',title: '收款人身份证号', hide: true},
                    {field: 'payeeAccount',title: '收款人账号' ,width:230},
                    {field: 'payeeName', title: '收款人姓名',width:100, align: 'center'},
                    {field: 'payeeMobile', title: '收款人手机', hide: true},
                    {field: 'payAmount', title: '金额',width:110 ,templet:function (d) {
                        return '￥' + formatMoney(d.payAmount) + '元';
                    }},
                    {field: 'payeeAccountBankName', title: '开户行', hide: true},
                    {field: 'paymentStatus', title: '状态码',width:100 , align: 'center', templet: function(d){
                            if(d.paymentStatus == "P"){
                                return "<span style='color:deepskyblue;'>银行处理中</span>";
                            }else if(d.paymentStatus == "S"){
                                return "<span style='color:lightseagreen;'>支付成功</span>";
                            }else if(d.paymentStatus == "F"){
                                return "<span style='color:red;'>支付失败</span>";
                            }else{
                                return "线下支付";
                            }
                        }
                    },
                    {field: 'sumMonth', title: '当月总和'},
                    {field: 'paymentMsg',width:100, title: '状态说明'},
                    {field: 'paymentStatus', title: '银行操作',width:100, align:"center", templet: function(d){
                            if(d.paymentStatus == "P"){
                                return "<a class='layui-btn layui-btn-xs' data-id='d.orderId' lay-event='queryPayment' onclick='queryPayment(\""+d.id+"\");'>查询</a>";
                            }else{
                                return "";
                            }
                        }
                    },{fixed: 'right', title: '订单操作', templet: function(d){
                            if(d.paymentStatus == "F"){
                                return "支付失败";
                            }else if(d.paymentStatus == "S"){
                                return "支付成功";
                            }else if(d.paymentStatus == "P"){
                                var str = "<select name='interest1' lay-filter='updateSta'>"+
                                    "<option value='P|"+d.id+"' >请选择</option>"+
                                    "<option value='F|"+d.id+"'>置为失败</option>"+
                                    "<option value='S|"+d.id+"'>置为成功</option>"+
                                    "</select>";
                                return str;
                            }else{
                                return "线下支付";
                            }

                        }
                    }
                ]
            ],
            height : 'auto'
            , page: false,
            success : function(){
                form.render('select');
            }
        });
        form.render('select');


        form.on('select(updateSta)',function (obj) {
            var _val = obj.value,
                _status = _val.split('|')[0],
                _id = _val.split('|')[1];
            var str = "";

            if(_status == "P"){
                //如果选择审核中不做任何操作
                return;
            }

            if(_status == "S"){
                str = "确认将当前订单支付修改为支付成功？【如修改则无法进行回撤，请确认后再操作】";
            }else{
                str = "确认将当前订单支付修改为支付失败？【如修改则无法进行回撤，请确认后再操作】"
            }

            layer.confirm(str,{ btn : ["确定", "取消"], btn1 : function (index) {
                    var json="{\"id\":\""+_id+"\",\"paymentStatus\":\""+_status+"\"}";
                    $.post("/seller/order/updateDetailPaymentStatus", {json:json}, function (res) {
                        layer.msg("修改成功", {icon: 1, time: 2000});
                    });
                }, btn2 : function(){
                    //取消操作
                    layer.msg("操作已取消!", {icon: 2});
                }
            });
        });
        
        function formatMoney(str) {
            if (!str) str = '0.00';
            let ret = Math.round(parseFloat(str) * 100) / 100;
            let decimal = ret.toString().split('.');
            if (decimal.length === 1) {
                return ret.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                    + '.00';
            };
            if (decimal.length > 1) {
                decimal[0] = decimal[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                if (decimal[1].length < 2) {
                    decimal[1] += '0';
                    return decimal.join(".");
                }
                return decimal.join(".");
            };
            return ret;
        }

    });
</script>
<script>
    function queryPayment(orderId){
        let table = layui.table;
        $.ajax({
        	url : '/platform/grant/list/detail?platformGrantId='+orderId ,
            type : "get",
            success : function(res){
                layer.msg("操作完成！");
                var frameId=document.getElementById('templateTable').getElementsByTagName("iframe")[0].id;//获取iframe页面的id！
                $('#'+frameId)[0].contentWindow.location.reload();//子页面刷新！
            }
        });
    }
</script>
</html>
